<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_表格相关属性二.</title>
    <style>
        table{
            width: 500px;
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 10px;
            empty-cells: hide;
            caption-side: bottom;
        }
    </style>
</head>
<body>
<!--
    表格相关属性：
        1.table-layout : 设置列宽度
            属性值：
                auto:自动，列宽根据内容进行计算（默认值）
                fixed:固定，平均分成等宽
        2.border-spacing:单元格间距,css中可用的长度单位 生效的前提是单元格不能进行合并
        3.border-collapse:合并单元格边框
            属性值：
                collapse：合并
                separate：不合并
        4.empty-cells:隐藏没有内容的单元格
            属性值：
                show:显示（默认值）
                hide:隐藏
                生效前提：单元格不能进行合并

        5.caption-side:设置表格标题位置
            属性值：
                top:表格标题在表格上方（默认值）
                bottom:表格标题在表格下方
        这五个属性都是表格的特有属性。
-->
    <table border="1">
        <caption>人员信息表</caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>19</td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>18</td>
                <td>群众</td>
            </tr>  <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td>团员</td>
            </tr>
        </tbody>
    </table>
</body>
</html>